<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
           <!-- <input type="text" v-model="num1" @keyup="change1"> -->
           <input type="text" v-model="num1" >
           <span>+</span>
           <!-- <input type="text" v-model="num2" @keyup="change2"> -->
           <input type="text" v-model="num2" >
           <span>=</span>
           <input type="text" disabled v-model="num3">
        </div>
        <script>
            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                watch:{
                    num1: function(newValue, oldValue){
                        console.log(newValue, oldValue)
                        this.num3 = parseInt(this.num1) + parseInt(this.num2)
                    },
                    num2: function(newValue, oldValue){
                        console.log(newValue, oldValue)
                        this.num3 = parseInt(this.num1) + parseInt(this.num2)
                    }
                },
                data:{
                    num1:0,
                    num2:0,
                    num3:0
                },
                methods: {
                    change1(){
                        this.num3 = parseInt(this.num1) + parseInt(this.num2)
                    },
                    change2(){
                        this.num3 = parseInt(this.num1) + parseInt(this.num2)
                    }
                },
            });

        </script>
    </body>
</html>